import React, { Component } from 'react'
import mjj from "../../../assets/images/mjj.jpg"
import styles from "./FoodList.module.scss"
/*
菜品列表组件
用于展示热销、优惠、招牌、闭店、加料等信息
*/

export default class FoodList extends Component {
    render() {
        return (
            <div className={styles.listBox}>
                {/* 列表标题 */}
                <div className={styles.listTit}>
                    <strong>热销</strong>
                    <span>大家都喜欢吃，才叫真好吃</span>
                </div>
                {/* 栏目内容 */}
                {this.props.foodNum.map((v,i) =>
                    <div key={v.id} className={styles.listItem}>
                        <div className={styles.itemImg}>
                            <img src={mjj} alt="麻椒鸡" />
                        </div>
                        <div className={styles.itemMsg}>
                            <div className={styles.itemName}>{v.name}</div>
                            <div className={styles.itemDes}>{v.des}</div>
                            <div className={styles.itemPrice}>
                                <div className={styles.priceLeft}>
                                    ￥<span>{v.price}</span>起
                                </div>
                                <div className={styles.priceRight}>选规格</div>
                            </div>
                        </div>
                    </div>)}
            </div>
        )
    }
}
